<template>
  <div class="wrapper">
    <ul class="bubble-bgwall">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <center>
      <div class="login-wrapper">
        <h1 class="welcomeFont">欢迎登录</h1>
        <div class="tabs">
          <div
            :class="[isUser ? 'tabBtu' : 'initial']"
            @click="changeIdentityToUser"
          >
            我要找工作
          </div>
          <div
            :class="[isUser ? 'eminitial' : 'emtabBtu']"
            @click="changeIdentityEnterprise"
          >
            我要招聘
          </div>
        </div>
        <!-- 用户登录 -->
        <el-form
          ref="formRef"
          :model="loginForm"
          :rules="rules"
          label-width="auto"
          :label-position="labelPosition"
          style="max-width: 300px; padding: 10px 20px"
          v-show="isUser"
        >
          <el-form-item label="邮箱" prop="email" class="label">
            <el-input
              v-model="loginForm.email"
              clearable
              placeholder="请输入邮箱"
            />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            v-show="!isCodeLogin"
            class="label"
          >
            <el-input
              v-model="loginForm.password"
              type="password"
              show-password
              autocomplete="off"
              clearable
              placeholder="请输入密码"
              @keyup.enter="Login"
            />
          </el-form-item>
          <el-row v-show="isCodeLogin">
            <el-col :span="16">
              <el-form-item
                label="验证码"
                prop="captcha"
                width="150px"
                class="label"
              >
                <el-input
                  v-model="loginForm.captcha"
                  placeholder="请输入验证码"
                  @keyup.enter="Login"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 3px">
              <el-button round @click="getCode" :disabled="isDisposed">{{
                isDisposed ? `${time}s后重新获取` : "获取验证码"
              }}</el-button>
            </el-col>
          </el-row>
          <el-form-item style="height: 40px">
            <el-checkbox v-model="rememberPassword">记住我</el-checkbox>
            <span class="forgotPassword" @click="toForgotPassword"
              >忘记密码</span
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              round
              class="btu"
              @click="Login"
              :loading="isLoginLoading"
              >登 录</el-button
            >
          </el-form-item>
          <el-form-item>
            <span
              class="goCodeLogin"
              @click="changeloginMethod"
              v-show="!isCodeLogin"
              >验证码登录</span
            >
            <span
              class="goCodeLogin"
              @click="changeloginMethod"
              v-show="isCodeLogin"
              >密码登录</span
            >
            <span class="goLogin" @click="toRegister">立即注册</span>
          </el-form-item>
        </el-form>

        <!-- 企业登录 -->
        <el-form
          ref="formRef"
          :model="loginForm"
          :rules="enterpriseRules"
          label-width="auto"
          :label-position="labelPosition"
          style="max-width: 300px; padding: 10px 20px"
          v-show="!isUser"
        >
          <el-form-item label="企业邮箱" prop="email" class="label">
            <el-input
              v-model="loginForm.email"
              clearable
              placeholder="请输入企业邮箱"
            />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            v-show="!isCodeLogin"
            class="label"
          >
            <el-input
              v-model="loginForm.password"
              show-password
              autocomplete="off"
              clearable
              placeholder="请输入密码"
              @keyup.enter="Login"
            />
          </el-form-item>
          <el-row v-show="isCodeLogin">
            <el-col :span="16">
              <el-form-item
                label="验证码"
                prop="captcha"
                width="150px"
                class="label"
              >
                <el-input
                  v-model="loginForm.captcha"
                  placeholder="请输入验证码"
                  @keyup.enter="Login"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 3px">
              <el-button round @click="getCode" :disabled="isDisposed">{{
                isDisposed ? `${time}s后重新获取` : "获取验证码"
              }}</el-button>
            </el-col>
          </el-row>
          <el-form-item>
            <el-checkbox v-model="rememberPassword">记住我</el-checkbox>
            <span class="forgotPassword" @click="toForgotPassword"
              >忘记密码</span
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              round
              class="btu"
              @click="Login"
              :loading="isLoginLoading"
              >登 录</el-button
            >
          </el-form-item>
          <el-form-item>
            <span
              class="goCodeLogin"
              @click="changeloginMethod"
              v-show="!isCodeLogin"
              >验证码登录</span
            >
            <span
              class="goCodeLogin"
              @click="changeloginMethod"
              v-show="isCodeLogin"
              >密码登录</span
            >
            <span class="goLogin" @click="toRegister">立即注册</span>
          </el-form-item>
        </el-form>
      </div>
    </center>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, FormItemProps, FormProps } from "element-plus";
import { sendCode } from "@/api/register";
import { useUserInfor } from "@/stores/userInfo";

const userStore = useUserInfor();
const router = useRouter();

//表单对齐方式
const labelPosition = ref<FormProps["labelPosition"]>("left");
const formRef = ref(null);

//登录表单
interface loginData {
  email: string;
  password: string;
  captcha: string;
  role: string;
}

const loginForm: loginData = reactive({
  email: "",
  password: "",
  captcha: "",
  role: "",
});

//表单校验规则
const rules = reactive({
  email: [
    { message: "请输入您的邮箱", trigger: "blur" },
    {
      type: "string",
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
});
const enterpriseRules = reactive({
  email: [
    { message: "请输入企业邮箱", trigger: "blur" },
    {
      type: "string",
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
});

//更换企业时候的表单重置
const formReset = () => {
  loginForm.email = "";
  loginForm.password = "";
  loginForm.captcha = "";
};

//更换企业与用户的值
const isUser = ref<boolean>(true);
const changeIdentityToUser = () => {
  isUser.value = true;
  formReset();
};
const changeIdentityEnterprise = () => {
  isUser.value = false;
  loginForm.role = "EMPLOY";
  formReset();
};

//倒计时效果
const time = ref(60);
const isDisposed = ref(false);
const handleTimeChange = () => {
  if (time.value <= 0) {
    isDisposed.value = false;
    time.value = 60;
  } else {
    setTimeout(() => {
      time.value--;
      handleTimeChange();
    }, 1000);
  }
};
//获取验证码
const getCode = async () => {
  loginForm.captcha = "";
  const res = await sendCode(loginForm.email);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: res.msg,
    });
    ElMessage({
      type: "success",
      message: "验证码在一分钟内有效",
    });
    //开始倒计时
    isDisposed.value = true;
    handleTimeChange();
  } else {
    ElMessage.error(res.msg);
  }
};
//记住密码
const rememberPassword = ref<boolean>(false);
//验证码登录
const isCodeLogin = ref<boolean>(false);
const changeloginMethod = () => {
  isCodeLogin.value = !isCodeLogin.value;
};
//登录按钮加载
const isLoginLoading = ref<boolean>(false);

//登录
const Login = async () => {
  isLoginLoading.value = true;
  //判断是否为验证码登录
  if (!isCodeLogin.value && loginForm.password === "") {
    ElMessage.error("请输入密码");
    console.log("请输入密码");
    isLoginLoading.value = false;
    return;
  }
  if (isCodeLogin.value && loginForm.captcha === "") {
    ElMessage.error("请输入验证码");
    console.log("请输入验证码");
    isLoginLoading.value = false;
    return;
  }
  //判断是否为用户登录
  if (isUser.value) {
    loginForm.role = "USER";
  }
  // 使用formRef进行验证
  formRef.value.validate(async (valid) => {
    if (valid) {
      userStore.Login(
        loginForm,
        router,
        isCodeLogin,
        rememberPassword,
        isLoginLoading
      );
    } else {
      isLoginLoading.value = false;
      ElMessage.error("请检查您输入的数据是否正确");
    }
  });
};

//跳转注册页面
const toRegister = () => {
  router.push("/register");
};

//跳转忘记密码界面
const toForgotPassword = () => {
  router.push("/forgetPassword");
};
</script>

<style lang="scss" scoped>
//外壳
.wrapper {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-image: url(../assets/img/registrationBackgroundImage.jpg);
  background: linear-gradient(to bottom, #3f5b62, #f5f4f1);
  background-repeat: no-repeat;
  background-size: cover;

  .bubble-bgwall {
    overflow: hidden;
    position: fixed;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .bubble-bgwall li {
    display: flex;
    position: absolute;
    bottom: -200px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ccc;
    animation: bubble 15s infinite;
    z-index: 999;
  }

  .bubble-bgwall li:nth-child(1) {
    left: 10%;
  }

  .bubble-bgwall li:nth-child(2) {
    left: 20%;
    width: 90px;
    height: 90px;
    animation-duration: 7s;
    animation-delay: 2s;
  }

  .bubble-bgwall li:nth-child(3) {
    left: 25%;
    animation-delay: 4s;
  }

  .bubble-bgwall li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.3);
    animation-duration: 8s;
  }

  .bubble-bgwall li:nth-child(5) {
    left: 70%;
  }

  .bubble-bgwall li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.2);
    animation-delay: 3s;
  }

  .bubble-bgwall li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    animation-delay: 2s;
  }

  .bubble-bgwall li:nth-child(8) {
    left: 55%;
    width: 40px;
    height: 40px;
    font-size: 12px;
    animation-duration: 15s;
    animation-delay: 4s;
  }

  .bubble-bgwall li:nth-child(9) {
    left: 25%;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    animation-duration: 12s;
    animation-delay: 2s;
  }

  .bubble-bgwall li:nth-child(10) {
    left: 85%;
    width: 40px;
    height: 40px;
    animation-delay: 5s;
  }

  @keyframes bubble {
    0% {
      transform: translateY(0) rotate(45deg);
    }

    100% {
      transform: translateY(-1000px) rotate(180deg);
    }
  }

  //登录外壳模块
  .login-wrapper {
    position: relative;
    width: 400px;
    height: 380px;
    padding-bottom: 45px;
    border-radius: 5%;
    background: linear-gradient(to bottom right, #f5f4f1, #3f5b62);

    //欢迎词语
    .welcomeFont {
      // padding: 20px 10px;
      padding-top: 20px;
      font-size: 40px;
      color: #fefefe;
      text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
        0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.9);
    }

    //标签页样式
    .tabs {
      width: 300px;
      height: 50px;
      border-radius: 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;

      .tabBtu {
        width: 130px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(to bottom, #f5f4f1, #3f5b62);
        color: #fff;
        border-radius: 16px;
      }

      .emtabBtu {
        width: 130px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(to bottom, #f5f4f1, #3f5b62);
        color: #fff;
        border-radius: 16px;
      }

      .tabBtu:hover {
        cursor: default;
      }

      .eminitial {
        width: 130px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        color: #3a5487;
        border-radius: 16px;
      }

      .initial {
        width: 130px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        color: #3a5487;
        border-radius: 16px;
      }

      .eminitial:hover {
        width: 130px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(to bottom, #f5f4f1, #3f5b62);
        color: #fff;
        border-radius: 16px;
        cursor: pointer;
      }

      .initial:hover {
        width: 130px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(to bottom, #f5f4f1, #3f5b62);
        color: #fff;
        border-radius: 16px;
        cursor: pointer;
      }
    }

    //登录按钮
    .btu {
      padding: 20px 135px;
      left: 8px;
      position: absolute;
      top: 0;
    }

    //忘记密码
    .forgotPassword {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 17px;
      color: #fefefe;
      text-shadow: 0 0 0.5em #3f5b62, 0 0 0.2em #5c5c5c;
      cursor: pointer;
    }

    //验证码登录
    .goCodeLogin {
      position: absolute;
      left: 0;
      bottom: -70px;
      font-size: 20px;
      color: #fefefe;
      text-shadow: 0 0 0.5em #3f5b62, 0 0 0.2em #5c5c5c;
      cursor: pointer;
    }

    .goCodeLogin:hover {
      position: absolute;
      left: 0;
      bottom: -70px;
      font-size: 20px;
      color: #fefefe;
      text-shadow: 0 0 0.5em #4d4d4d, 0 0 0.2em #0a0a0a;
      cursor: pointer;
    }

    //去登录字样
    .goLogin {
      position: absolute;
      right: 0;
      bottom: -70px;
      font-size: 20px;
      color: #fefefe;
      text-shadow: 0 0 0.5em #4d4d4d, 0 0 0.2em #5c5c5c;
      cursor: pointer;
    }

    .goLogin:hover {
      position: absolute;
      right: 0;
      bottom: -70px;
      font-size: 20px;
      color: #fefefe;
      text-shadow: 0 0 0.5em #4d4d4d, 0 0 0.2em #0a0a0a;
      cursor: pointer;
    }
  }
}

.label {
  background: #8ca9aa;
  border-radius: 7px;
  padding-left: 10px;
}

//改变
:deep(.el-form-item__label) {
  color: #fff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #86969a;
  border-color: #86969a;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #86969a;
}

:deep(.el-checkbox:last-of-type) {
  margin-right: 0;
  color: #fff;
}

:deep(.el-button--primary) {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: #86969a;
  --el-button-border-color: #86969a;
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-active-color: #86969a;
  --el-button-hover-text-color: #456067;
  --el-button-hover-link-text-color: var(--el-color-primary-light-5);
  --el-button-hover-bg-color: #e3e5e3;
  --el-button-hover-border-color: #e3e5e3;
  --el-button-active-bg-color: #86969a;
  --el-button-active-border-color: #86969a;
  --el-button-disabled-text-color: var(--el-color-white);
  --el-button-disabled-bg-color: var(--el-color-primary-light-5);
  --el-button-disabled-border-color: var(--el-color-primary-light-5);
}

:deep(.el-input) {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: #456067;
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: #fff;
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: #fff;
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: #456067;
  --el-input-width: 100%;
  --el-input-height: var(--el-component-size);
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  width: var(--el-input-width);
}
</style>
